

<template>
  <div class="food-route-planning">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">以下是您选择的,从太原出发去晋祠的路线一:</div>
          </div>
          <div class="category-list">
            {{foodRoute}}
<!--            路线一:从大原东山地区出发,经东峰路、长风东街、长风西街、新晋祠路到达晋祠,这条路线距离相对较远,从城市的东边绕到西边,全程约30公里,根据路况行驶时间可能在!小时左右。-->
          </div>
        </div>

      </div>


    </div>

  </div>
  <div class="input-bottom-dialogue">
    <!--            头像-->
    <div style="margin-right: 14px;">
      <img style="width: 60px;height: 60px;" src="@/assets/images/notLoggedIn/user_image.png"></img>
    </div>
    <!--            右侧对话框-->
    <div class="input-bottom-dialogue-container">
      <div class="input-bottom-dialogue-container-box">
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">美食预设</div>
          </div>
          <div class="category-list">
            <el-form ref="formRefOne" label-width="70" style="margin-left: 8px;margin-bottom: 10px;" :inline="true" :model="formInline" class="demo-form-inline">

              <el-form-item label="日期" prop="scheduledDate">
<!--                <el-date-picker-->
<!--                    v-model="value1"-->
<!--                    type="datetimerange"-->
<!--                    range-separator="至"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期">-->
<!--                </el-date-picker>-->
                <el-date-picker
                    @change="changeSelect"
                    v-model="formInline.scheduledDateList"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="请选择">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="人数" prop="peopleNum">
                <el-input @change="changeSelect" v-model="formInline.peopleNum" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="预算" prop="budget">
                <el-input @change="changeSelect" v-model="formInline.budget" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="timer">
          <div class="input-tip-title entourage-list">
            <div style="display: flex;align-items:  center; ">
              <div class="tip">
                <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
              </div>
              <div class="title">美食餐次(可多选)</div>
            </div>
          </div>
          <div class="category-list">
            <div @click="gourmetMealsClick(item,index)"
                 :class="item.isSelected?'active-category-list-item':'category-list-item'"
                 v-for="(item,index) in gourmetMeals">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
        <div class="timer">
          <div class="input-tip-title">
            <div class="tip">
              <img style="width: 14px;height: 14px;margin-left: 4px" src="@/assets/images/notLoggedIn/home_icon.png">
            </div>
            <div class="title">距离景点距离:</div>
          </div>
          <div class="category-list">
            <div @click="distanceClick(item,index)" :class="currentDistance===index?'active-category-list-item':'category-list-item'"  v-for="(item,index) in distanceFromAttractionsList">
              <div class="category-list-item-title">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>

        <!--        确定-->
        <div class="query-button-groups">
          <div class="btn-box" @click="goRegister">
            <div class="login-btn">
              确 定
            </div>
          </div>
          <div class="btn-box right-btn" @click="goAI">
            <div class="login-btn">
              AI智能生成
            </div>
          </div>
        </div>

      </div>


    </div>

  </div>
  <IntelligentlyGeneratedAI :label="intelligentlyLabel" :isTourist="isTouristType"
                            :typeRoute="PREDICT_STATUS.FoodRoutePlanning"
                            :aiDataList="currentNavigationList"
                            @nextPageRoute="nextPageRoute" v-if="currentNavigation"/>
</template>
<script setup>

import IntelligentlyGeneratedAI from "@/views/home/components/PreTripPlanning/IntelligentlyGeneratedAI.vue";
import {reactive, ref} from "vue";
import api from "@/service/TouristHomepage";
import {PREDICT_STATUS} from "@/utils/consts";
import {useTouristHomepageStore} from "@/store/touristHomepage";
const $emit = defineEmits(['nextPageRoute'])
const intelligentlyLabel=ref('以下是路线一途径的美食,请选择适合您的美食:');
const formInline=reactive({
  scheduledDateList: [],
  scheduledDate: '',
  peopleNum: '',
  budget:'',
  meals:'',
  distance:'',
  scheduledEndDate:'',

})
const currentGourmetMeals=ref(-1);
const gourmetMeals=ref([
  {
    name:'午餐',
    price:'10',
    distance:'10',
    isSelected:false
  },
  {
    name:'晚餐',
    price:'10',
    distance:'10',
    isSelected:false
  },
  {
    name:'小吃',
    price:'10',
    distance:'10',
    isSelected:false
  },
  {
    name:'正餐',
    price:'10',
    distance:'10',
    isSelected:false
  },
])
function gourmetMealsClick(data,index){
  data.isSelected=!data.isSelected;
  currentGourmetMeals.value=index;
  changeSelect();
}
const currentDistance=ref(-1);
const distanceFromAttractionsList=ref([
    {
      name:'1公里以下',
      price:'10',
      distance:'10'
    },
    {
      name:'1-3公里',
      price:'10',
      distance:'10'
    },
    {
      name:'3-5公里',
      price:'10',
      distance:'10'
    },
  {
    name:'5-10公里',
    price:'10',
    distance:'10'
  },


]);
const isTouristType=ref(true);
function distanceClick(data,index){
  changeSelect();
  currentDistance.value=index;


}
function goRegister(){
  let isSelectedArr=[];
  if(Number(currentDistance.value)>-1){
    formInline.distance=distanceFromAttractionsList.value[currentDistance.value].name;
  }
  gourmetMeals.value.forEach((item,index)=>{
    if(item.isSelected){
      isSelectedArr.push(JSON.parse(JSON.stringify(item.name)))
    }
  })
  formInline.meals=isSelectedArr.join(',');
  formInline.scheduledDate=formInline.scheduledDateList[0];
  formInline.scheduledEndDate=formInline.scheduledDateList[1];
  api.createOrUpdatefoodTour(formInline).then((res) => {
  });
}
const currentNavigationList=ref([]);
function goAI(){
  currentNavigation.value=true;
  useTouristHomepageStore().setTouristClearStatus(false)
  let isSelectedArr=[];
  if(Number(currentDistance.value)>-1){
    formInline.distance=distanceFromAttractionsList.value[currentDistance.value].name;
  }
  gourmetMeals.value.forEach((item,index)=>{
    if(item.isSelected){
      isSelectedArr.push(JSON.parse(JSON.stringify(item.name)))
    }
  })
  formInline.meals=isSelectedArr.join(',');
  formInline.scheduledDate=formInline.scheduledDateList[0];
  formInline.scheduledEndDate=formInline.scheduledDateList[1];
  formInline.tourRouteParam=useTouristHomepageStore().setTouristAiDataTourRoute;
  api.getFoodTourRouteList(formInline).then((res) => {
    console.log("美食路线规划AI智能生成---",  res)
    currentNavigationList.value=res.data.answers;

  })
}
function nextPageRoute(data){
  console.log('data',data)
//
  $emit('nextPageRoute',data)

}
const currentNavigation=ref(false);
// 监听useTouristHomepageStore().touristClearStatus
watch(() => useTouristHomepageStore().touristClearStatus, () => {
  if(useTouristHomepageStore().touristClearStatus){
    currentNavigation.value=false;
    //   清空form表单中的数据resetFields()
    resetForm();
  }
})
// 定义表单引用
const formRefOne = ref();
//重置表单
const resetForm = () => {
  formRefOne.value.resetFields();
  gourmetMeals.value.forEach((item,index)=>{
    item.isSelected=false;
  })
  currentDistance.value=-1;
};
function changeSelect(){
  useTouristHomepageStore().setTouristClearStatus(false)
}
// 计算属性
const foodRoute = computed(() => {
  return useTouristHomepageStore().setTouristAiDataTourRoute || '';

})
onMounted(() => {
})
</script>
<style scoped lang="scss">
@import "@/assets/main.scss";
.food-route-planning{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 94px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;

          //  换行
          flex-wrap: wrap;
          font-family: DingliesongtypefaceRegular;
          font-weight: 400;
          font-size: 16px;
          color: #9B6548;
          text-align: left;
          font-style: normal;
          text-transform: none;


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//旅游路线规划
.input-bottom-dialogue{
  display: flex;
  margin-bottom: 20px;
  .input-bottom-dialogue-container{
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 358px;
    background: #EDDDCD;
    border-radius: 10px 10px 10px 10px;
    width: calc(100% - 20px);
    .input-bottom-dialogue-container-box{
      width: calc(100% - 40px);
      height: calc(100% - 40px);
      .timer{
        border-bottom: 1px solid #EBD7C5;
        .entourage-list{
          justify-content: space-between;
          width:100%;
        }
        .input-tip-title{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .title{
            height: 16px;
            font-family: DingliesongtypefaceRegular;
            font-weight: 400;
            font-size: 16px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }
        .category-list{
          display: flex;
          margin-top: 16px;
          //  换行
          flex-wrap: wrap;
          margin-bottom: 10px;
          .category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #9B6548;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #F5ECE2;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }
          .active-category-list-item{
            cursor: pointer;
            margin-left: 8px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;
            font-family: DingliesongtypefaceRegular;
            height: 22px;
            background: #9B6548;
            border-radius: 6px 6px 6px 6px;
            line-height: 22px;
            .category-list-item-title{
              padding: 0 5px;
            }
          }


        }
      }
      .query-button-groups{
        display: flex;
        justify-content: end;
        .right-btn{
          margin-left: 14px;
        }
        .btn-box{
          margin-top: 14px;
          height: 50px;
          border-radius: 0px 0px 0px 0px;
          display: flex;
          justify-content: center;
          .login-btn {
            cursor: pointer;
            background-image: url("@/assets/images/notLoggedIn/bnt2@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            width: 138px;
            height:42px;
            border-radius: 4px 4px 4px 4px;
            font-family: DingliesongtypefaceRegular;
            font-size: 16px;
            letter-spacing: 5px;
            color: #FFFFFF;
            line-height: 42px;
            text-align: center;
            &:hover {
              background-image: url("@/assets/images/login/login_btn_highlight.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              width: 138px;
              height:50px;
              border-radius: 4px 4px 4px 4px;
              font-family: DingliesongtypefaceRegular;
              font-size: 16px;
              letter-spacing: 5px;
              color: #FFFFFF;
              line-height:42px;
              text-align: center;
            }
          }
        }
      }

    }

  }
}
//  旅游路线规划
.specifics{
  margin-top: 20px;
}
</style>
<style>
@import "@/assets/main.scss";
</style>